<template>
    <view class="box">
        <view class="quan" v-for="(item,index) in bodyData">
            <image class="quan-bg-img" mode="widthFix" src="/static/in_wodefuli/1.png"></image>
            <view class="quan-body">
                <!-- 价格 -->
                <view class="quan-body-price">￥<text class="quan-body-price-num">{{ item.price }}</text></view>
                <!-- 内容 -->
                <view class="quan-body-content">{{ item.content }}</view>
                <!-- 时间 -->
                <view class="quan-body-time">有效期至：{{ item.enableTime.split(" ")[0] }}</view>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    data() {
        return {
            bodyData: [
                {
                    "activityId": 1, //活动id
                    "content": "内容", //描述内容
                    "couponId": 1, //活动福利id
                    "createTime": "2023-03-22 18:16:39",
                    "discount": 8, //折扣
                    "enableTime": "2023-06-30 18:16:39", //可使用时间
                    "id": 2, //用户id
                    "name": "清洗券", //福利名称
                    "price": 100, //价格
                    "status": 1, //状态0未生效 1可使用 2已使用
                    "type": 1, //类型 1活动福利券
                    "userId": 2 //代理id
                }
            ],
        }
    },
    onLoad(options) {
		var token = uni.getStorageSync('token');
 
		if (token == null || token == '') {
			uni.setStorageSync('token', options.token);
		}

		this.getBodyData();
    },
    methods: {

        getBodyData() {
            this.$kt.request.request({
                api: this.$api.taskActivity.getUserCoupon,
                stateSuccess: (res) => {
                    this.bodyData = res.data;
                }
            })
        }

    }
}
</script>

<style lang="less" scoped>

.box {
    position: relative;
    padding: 30rpx;
    box-sizing: border-box;
}

.quan {
    position: relative;
    width: 100%;
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 10rpx 30rpx rgba(118,118,118,.1);
    .quan-bg-img {
        width: 100%;
        border-radius: 20rpx;
    }
    .quan-body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
        
        .quan-body-price {
            margin: 30rpx 0 0 30rpx;
            font-size: 40rpx;
            font-weight: bold;
            color: #fff;
            .quan-body-price-num {
                font-size: 80rpx;
            }
        }

        .quan-body-content {
            margin: 0rpx 0 0 30rpx;
            font-size: 30rpx;
            color: #fff;
        }

        .quan-body-time {
            position: absolute;
            left: 20rpx;
            bottom: 20rpx;
            font-size: 29rpx;
            color: #666666;
        }
    }
}
</style>